<template>
  <div class="xiaomi-layout">
    <!-- 顶部导航栏 - 70px高度 -->
    <header class="top-header">
      <div class="header-left">
        <button class="menu-btn" @click="toggleSidebar">
          <i class="material-icons">{{ sidebarOpen ? 'close' : 'menu' }}</i>
        </button>
        <div class="logo">
          <i class="material-icons">medical_services</i>
          <span class="logo-text">医学影像查看器</span>
        </div>
      </div>
      
      <div class="header-right">
        <button class="header-btn">
          <i class="material-icons">search</i>
        </button>
        <button class="header-btn">
          <i class="material-icons">notifications</i>
        </button>
        <button class="header-btn">
          <i class="material-icons">settings</i>
        </button>
        <div class="user-avatar">
          <i class="material-icons">account_circle</i>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 左侧边栏 -->
      <aside class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <nav class="sidebar-nav">
          <!-- 首页 -->
          <router-link to="/" class="nav-item" active-class="nav-item-active">
            <i class="material-icons">home</i>
            <span class="nav-text">首页</span>
          </router-link>

          <!-- DICOM功能组 -->
          <div class="nav-group">
            <div class="nav-group-title">DICOM 处理</div>
            
            <router-link to="/dicom-static" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">image</i>
              <span class="nav-text">静态加载</span>
            </router-link>
            
            <router-link to="/dicom-folder" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">folder</i>
              <span class="nav-text">文件夹加载</span>
            </router-link>
            
            <router-link to="/dicom-zip" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">archive</i>
              <span class="nav-text">压缩包加载</span>
            </router-link>
            
            <router-link to="/dicom-dynamic" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">dynamic_feed</i>
              <span class="nav-text">动态加载</span>
            </router-link>
            
            <router-link to="/dicom-3phase" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">view_comfy</i>
              <span class="nav-text">MPR三视图</span>
            </router-link>
            
            <router-link to="/dicom-volume" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">view_in_ar</i>
              <span class="nav-text">体数据加载</span>
            </router-link>
          </div>

          <!-- NII功能组 -->
          <div class="nav-group">
            <div class="nav-group-title">NII 处理</div>
            
            <router-link to="/nii-loader" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">psychology</i>
              <span class="nav-text">NII加载</span>
            </router-link>
          </div>

          <!-- 高级功能组 -->
          <div class="nav-group">
            <div class="nav-group-title">高级功能</div>
            
            <router-link to="/integrated-viewer" class="nav-item nav-item-featured" active-class="nav-item-active">
              <i class="material-icons">dashboard</i>
              <span class="nav-text">集成查看器</span>
              <span class="new-badge">新</span>
            </router-link>
            
            <router-link to="/dicom-nii-combo" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">layers</i>
              <span class="nav-text">多模态融合</span>
            </router-link>
            
            <router-link to="/format-validation" class="nav-item" active-class="nav-item-active">
              <i class="material-icons">verified</i>
              <span class="nav-text">格式校验</span>
            </router-link>
          </div>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 控制侧边栏显示状态
const sidebarOpen = ref(true)

// 切换侧边栏
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}
</script>

<style scoped>
/* 小米风格布局 */
.xiaomi-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 顶部导航栏 */
.top-header {
  height: 70px;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.header-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  margin-left: 8px;
  color: white;
  cursor: pointer;
}

/* 主容器 */
.main-container {
  flex: 1;
  width: 100%;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 侧边栏 */
.sidebar {
  width: 0;
  min-width: 0;
  background: white;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 100;
  flex-shrink: 0;
  border-right: 1px solid #f0f0f0;
}

.sidebar-open {
  width: 280px;
  min-width: 280px;
}

.sidebar-nav {
  padding: 24px 0;
  height: 100%;
  overflow-y: auto;
}

/* 导航组 */
.nav-group {
  margin-bottom: 32px;
}

.nav-group-title {
  padding: 0 20px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 16px;
}

/* 导航项 */
.nav-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
  margin: 2px 12px;
  border-radius: 8px;
}

.nav-item:hover {
  background-color: #f8f9fa;
  color: #667eea;
}

.nav-item-active {
  background-color: #667eea;
  color: white;
  font-weight: 600;
}

/* 特色导航项 */
.nav-item-featured {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.nav-item-featured:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border-color: rgba(102, 126, 234, 0.4);
}

.nav-item-featured.nav-item-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
}

/* 新功能徽章 */
.new-badge {
  position: absolute;
  right: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-item-active .new-badge {
  background: rgba(255, 255, 255, 0.3);
}

.nav-item .material-icons {
  margin-right: 12px;
  font-size: 20px;
}

.nav-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 主内容区 */
.main-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: #f5f5f5;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 滚动条样式 */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    height: calc(100vh - 70px);
    z-index: 999;
  }
  
  .sidebar-open {
    width: min(280px, 80vw);
    min-width: min(280px, 80vw);
  }
}

@media (max-width: 768px) {
  .logo-text {
    display: none;
  }
  
  .sidebar-open {
    width: min(260px, 85vw);
    min-width: min(260px, 85vw);
  }
}

@media (max-width: 480px) {
  .sidebar-open {
    width: 90vw;
    min-width: 90vw;
  }
}

/* Material Icons 确保加载 */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
</style>